<template>
  <div id="demo-list">
    <el-tabs v-model="editableTabsValue" @tab-remove="removeTab" @tab-click="clickTab">
      <el-tab-pane :name="defaultActiveName" label="网关列表">
        <demo-search-bar v-on:search="search"></demo-search-bar>
        <el-row style="margin-bottom: 7px;">
          <el-button-group  style="float: left;">
            <el-button size="mini" type="primary" @click="create" v-has-permission="'DemoList.create'" icon="el-icon-plus">新建</el-button>
            <el-button :disabled="showType == 2" size="mini" type="primary" @click="update" v-has-permission="'DemoList.update'" icon="el-icon-edit">修改</el-button>
            <el-button :disabled="showType == 2" size="mini" type="primary" @click="deleteById" v-has-permission="'DemoList.delete'" icon="el-icon-delete">删除</el-button>
            <el-button size="mini" type="primary" @click="importByExcel" v-has-permission="'DemoList.import'" icon="el-icon-upload2">导入</el-button>
            <el-button size="mini" type="primary" v-iec-export-excel-directive="exportExcelPar" v-has-permission="'DemoList.export'" icon="el-icon-download">导出</el-button>
            <el-button :disabled="showType == 2" size="mini" type="primary" @click="detail" v-has-permission="'DemoList.detail'" icon="el-icon-view">查看明细</el-button>
            <el-tooltip content="图片展示方式" placement="top" effect="light">
              <el-button size="mini" :type="showType == 2 ? 'danger' : 'primary'" @click="changeShowType(2)" icon="el-icon-menu"></el-button>
            </el-tooltip>
            <el-tooltip content="列表展示方式" placement="top" effect="light">
              <el-button size="mini" :type="showType == 1 ? 'danger' : 'primary'" @click="changeShowType(1)" icon="el-icon-s-fold"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-row>
        <div v-if="showType == 2" v-loading="loading">
          <el-row>
            <div class="paved-5" :key="item.id" v-for="item in baseDto.lstDto">
              <div :class="item.status == 'B101401' ? 'paved-bgcol green' : (item.status == 'B101403' ? 'paved-bgcol yellow' : 'paved-bgcol gray')">
                <el-tooltip content="单击查看明细" placement="top" effect="light">
                  <div class="pavedImg" @click="detail(item)">
                    <img src="../../../assets/icon/equipment/4.jpg" width="204" height="194"/>
                    <span v-if="item.status == 'B101401'" class="green">{{item.statusLabel}}</span>
                    <span v-else-if="item.status == 'B101403'" class="yellow">{{item.statusLabel}}</span>
                    <span v-else class="gray">新建</span>
                  </div>
                </el-tooltip>
                <div class="paved-TagName">
                  <label>MAC：{{item.mac}}</label>
                  <p>
                    名称：{{item.name ? item.name : '-'}}
                  </p>
                </div>
                <div class="paved-but">
                  <el-tooltip content="修改网关" placement="top" effect="light">
                    <el-button type="warning" size="mini" icon="el-icon-edit" round v-has-permission="'DemoList.update'" @click="update(item)">编辑</el-button>
                  </el-tooltip>
                  <el-tooltip content="删除网关" placement="top" effect="light">
                    <el-button type="danger" size="mini" icon="el-icon-delete" round v-has-permission="'DemoList.delete'" @click="deleteById(item)">删除</el-button>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </el-row>
          <el-row>
            <pagination-component
              :pageNum="searchModel.pageDto.pageNum"
              :pageSize="searchModel.pageDto.pageSize"
              :total="baseDto.page.total"
              v-on:updatePageIndex="pageIndexChange">
             </pagination-component>
          </el-row>
        </div>
        <div v-if="showType == 1">
          <el-table
            v-loading="loading"
            border
            size="mini"
            :data="baseDto.lstDto"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="name"
              label="网关名称"
              width="200">
            </el-table-column>
            <el-table-column
              label="状态"
              width="60">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 'B101401'" type="success" size="mini" effect="dark">{{scope.row.statusLabel}}</el-tag>
                <el-tag v-if="scope.row.status == 'B101403'" type="warning" size="mini" effect="dark">{{scope.row.statusLabel}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="mac"
              label="MAC"
              width="120">
            </el-table-column>
            <el-table-column
              prop="softwareVersion"
              label="软件版本号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="hardwareVersion"
              label="硬件版本号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="areaFullName"
              label="区域"
              width="300">
            </el-table-column>
            <el-table-column
              prop="breakersNumber"
              label="断路器数量"
              width="100">
            </el-table-column>
            <el-table-column
              label="创建时间"
              width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageIndexChange"
            :current-page="searchModel.pageDto.pageNum"
            :page-sizes="searchModel.pageDto.pageSizes"
            :page-size="searchModel.pageDto.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="baseDto.page.total">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane v-for="item in editableTabs" :key="item.key" :label="item.label" :name="item.name" closable>
        <demo-create v-if="item.key == 'create'"></demo-create>
        <demo-update v-if="item.key == 'update'" v-bind:selectedModel="selectedModel"></demo-update>
        <demo-import v-if="item.key == 'import'"></demo-import>
        <demo-detail v-if="item.key == 'detail'" v-bind:selectedModel="selectedModel"></demo-detail>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Vue from 'vue'
import DemoCreate from './demo-create'
import DemoUpdate from './demo-update'
import DemoSearchBar from './demo-search-bar'
import DemoImport from './demo-import'
import DemoDetail from './demo-detail'
import PaginationComponent from '../../../common/component/pagination-component.vue'

export default {
  name: 'demo-list',
  components: {
    DemoImport,
    DemoSearchBar,
    DemoUpdate,
    DemoCreate,
    DemoDetail,
    PaginationComponent
  },
  data () {
    return {
      showType: 2,
      searchModel: {
        pageDto: {
          pageSize: 10,
          pageNum: 1,
          pageSizes: [10, 20, 50, 100]
        },
        name: null,
        mac: null,
        status: null
      },
      baseDto: { page: { total: 0 } },
      selectedModel: {},
      exportExcelPar: {
        fileType: 'xls',
        xmlName: 'demo',
        moduleName: 'demo',
        server: Vue.$demoServerURL
      },
      defaultActiveName: 'DemoList',
      editableTabsValue: 'DemoList',
      editableTabs: [],
      tabIndex: 2,
      loading: true,
      checkedDataList: [] // 选择的数据集合
    }
  },
  created: function () {
    this.listPage()
  },
  methods: {
    changeShowType: function (type) {
      this.showType = type
    },
    handleSelectionChange: function (val) {
      this.checkedDataList = val
    },
    listPage: function () {
      Vue.$ajax({
        method: 'post',
        url: Vue.$demoServerURL + '/web/v1/DemoController/listPage',
        data: this.searchModel
      }).then(res => {
        this.loading = false
        if (res.data.flag === 'SUCCESS') {
          this.baseDto = res.data
        } else {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        }
      })
    },
    pageSizeChange: function (e) {
      this.searchModel.pageDto.pageSize = e
      this.listPage()
    },
    pageIndexChange: function (e) {
      this.searchModel.pageDto.pageNum = e
      this.listPage()
    },
    search: function (p) {
      if (!p.isCollapse) {
        // 非高级查询，则只需要根据关键字查询
        this.searchModel.mac = p.searchKey
      } else {
        this.searchModel = p.searchModel
      }
      this.searchModel.pageDto.pageNum = 1
      this.listPage()
    },
    create: function () {
      this.addTab('新建网关', 'CreateDemo', 'create')
    },
    update: function (item) {
      let data = item
      if (this.showType === 1) {
        if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
          this.$message({
            message: '请选择一条数据',
            type: 'warning'
          })
          return
        }
        data = this.checkedDataList[0]
      }

      this.selectedModel = data
      this.addTab('编辑网关信息', 'UpdateDemo', 'update')
    },
    deleteById: function (item) {
      let data = item
      if (this.showType === 1) {
        if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
          this.$message({
            message: '请选择一条数据',
            type: 'warning'
          })
          return
        }
        data = this.checkedDataList[0]
      }

      this.$confirm('您确定删除该记录吗', '询问', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Vue.$ajax({
          method: 'delete',
          url: Vue.$demoServerURL + '/web/v1/DemoController/' + data.id
        }).then(res => {
          if (res.data.flag !== 'SUCCESS') {
            if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
              this.$message({
                message: res.data.message,
                type: 'warning'
              })
            }
          } else {
            this.$message({
              message: '成功',
              type: 'success'
            })
            this.listPage()
          }
        })
      })
        .catch(() => {})
    },
    importByExcel: function () {
      this.addTab('导入网关', 'ImportDemo', 'import')
    },
    detail: function (item) {
      let data = item
      if (this.showType === 1) {
        if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
          this.$message({
            message: '请选择一条数据',
            type: 'warning'
          })
          return
        }
        data = this.checkedDataList[0]
      }

      this.selectedModel = data
      this.addTab('查看明细', 'Detail', 'detail')
    },
    addTab: function (label, name, key) {
      let ele = { label: label, name: name, key: key }
      let flag = false

      for (let i = 0; i < this.editableTabs.length; i++) {
        let var1 = this.editableTabs[i]
        if (var1.key === key) {
          flag = true
          break
        }
      }

      if (!flag) {
        this.editableTabs.push(ele)
      }
      this.editableTabsValue = name
    },
    removeTab: function (targetName) {
      let tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            } else {
              activeName = this.defaultActiveName
              this.listPage()
            }
          }
        })
      }

      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter(tab => tab.name !== targetName)
    },
    clickTab: function (tab) {
      if (tab.name === this.defaultActiveName) {
        this.listPage()
      }
    }
  }
}
</script>
<style>
   @import '../../../assets/css/equipment-list.css';
</style>
